<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品采购统计</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css"  tppabs="https://www.layui.site/layui/dist/css/layui.css"  media="all">
	</head>
	<body>
		<div class="layui-panel" style="padding-top: 20px;margin: 15px;">
			<div class="layui-form">
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">日期范围</label>
					  <div class="layui-inline" id="test6">
						<div class="layui-input-inline" style="width: 150px;">
						  <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline" style="width: 150px;">
						  <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
						</div>
				 	  </div>
			     </div>
				 <div class="layui-inline">
				 	<label class="layui-form-label">商品类别</label>
				 	<div class="layui-input-block">
				 	  <input type="text" id="modo" name="title" readonly="" lay-verify="required" autocomplete="off" class="layui-input">
				 	</div>
				 </div>
			  </div>
			</div>
		</div>  
		<div class="layui-panel" style="padding-top: 20px;margin: 15px;">
			<table class="layui-hide" id="test3"></table>
		</div>
		
		
		<div id="classes" style="display: none;">
			<div id="test2" class="demo-tree"></div>
		</div>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script>
		layui.use(['tree', 'util','laydate'], function(){
		  var laydate = layui.laydate;
		  var tree = layui.tree
		      ,layer = layui.layer
			  ,table = layui.table
		      ,util = layui.util
			  ,$ = layui.jquery;
			data = [{
					title: '江西'
					,id: 1
					,children: [{
					  title: '南昌'
					  ,id: 1000
					  ,children: [{
						title: '青山湖区'
						,id: 10001
					  },{
						title: '高新区'
						,id: 10002
					  }]
					},{
					  title: '九江'
					  ,id: 1001
					},{
					  title: '赣州'
					  ,id: 1002
					}]
				  },{
					title: '广西'
					,id: 2
					,children: [{
					  title: '南宁'
					  ,id: 2000
					},{
					  title: '桂林'
					  ,id: 2001
					}]
				  },{
					title: '陕西'
					,id: 3
					,children: [{
					  title: '西安'
					  ,id: 3000
					},{
					  title: '延安'
					  ,id: 3001
					}]
				  }]
			$(document).on('click',"#modo",function(){
				layer.open({
				  type: 1,
				  skin: 'layui-layer-demo', //样式类名
				  closeBtn: 1, //不显示关闭按钮
				  anim: 3,
				  area: ["500px","500px"],
				  shadeClose: false , //开启遮罩关闭
				  content: $('#classes')
				});
			})
			laydate.render({
				elem: '#test6'
				,range: ['#test-startDate-1', '#test-endDate-1']
			});
			tree.render({
				elem: '#test2'
				,data: data
				,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
				,click: function(obj){
				  layer.msg(JSON.stringify(obj.data));
				}
			});
			
			table.render({
			    elem: '#test3'
			    ,url: '../../demo/'
			    ,cols: [[
			      {field:'id', width:80, title: 'ID', sort: true}
			      ,{field:'username', width:80, title: '用户名'}
			      ,{field:'sex', width:80, title: '性别', sort: true}
			      ,{field:'city', width:80, title: '城市'}
			      ,{field:'sign', title: '签名', minWidth: 150}
			      ,{field:'experience', width:80, title: '积分', sort: true}
			      ,{field:'score', width:80, title: '评分', sort: true}
			      ,{field:'classify', width:80, title: '职业'}
			      ,{field:'wealth', width:135, title: '财富', sort: true}
			    ]]
			    ,page: true
			  });
		  })
		
		</script>
	</body>
</html>
